<template>
	<view class="index">
		<nav-bars backState="1000"  bgColor="#fff" fontColor="#000" title="分销代理"></nav-bars>
		<!-- 顶部 -->
		<view class="topcont">
			<view class="topinput">
				<view class="i_top">
					<view class="i_tCan" slot="center">
						<view>
							
						</view>
						<view class="i_tInput">
							<view class="i_tiIcon iconfont icon-search"></view>
							<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData" placeholder="搜索您感兴趣的内容" placeholder-class="col-ccc" />
						</view>
						<view class="i_tBtn">
							<view class="i_tbIcon" @click="gitchat()"><text class="iconfont iconhuaban110"></text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="i_three">
				<view class="i_tSwiper" style="height:250rpx">
					<swiper autoplay interval="4200" duration="300" @change='threeBannerChange'>
						<swiper-item v-for="(item,index) in banner" :key="index">
							<view class="i_tCont">
								<image :src="item.img"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="i_tDots">
						<view class="i_tDot" v-for="(item,index) in banner" :key="index" :class="{'active': index == threeIndex}"><view class="i_tIcon"></view></view>
					</view>
				</view>
			</view>

		</view>
		<view class="creator_item">
			<view class="creator_icon" @click="openadmin()">
				<image src="https://cos.ryz1620.com/liankun/static/xue1.png"></image>
				<view>分销商城</view>
			</view>
			<view class="creator_icon" @click="navTo('/pages_mine/pages/my/creator')">
				<image src="https://cos.ryz1620.com/liankun/static/xue2.png"></image>
				<view>分销中心</view>
			</view>
			<view class="creator_icon" @click="navTo('/pages_now/pages/now/creator/list')">
				<image src="https://cos.ryz1620.com/liankun/static/xue3.png"></image>
				<view>分销学堂</view>
			</view>
		</view>
		<!-- <view class="ceater">
			<view @click="openadmin()"><image src="https://cos.ryz1620.com/liankun/static/IMG306.jpeg"></image><text>创客开店</text></view>
			<view @click="openadmin()"><image src="https://cos.ryz1620.com/liankun/static/IMG307.jpeg"></image><text>创客中心</text></view>
			<view @click="openadmin()"><image src="https://cos.ryz1620.com/liankun/static/IMG302.jpeg"></image><text>创客学堂</text></view>
		</view>
		<view class="bottombanner">
			<view class="i_bOper"><text>更多</text><view class="i_boIcon"><view class="iconfont icon-more"></view></view></view>
			<view class="i_bTitle">创客案例</view>
			<view class="i_tSwiper" style="height:375rpx">
				<swiper autoplay interval="5000" duration="400" @change='threeBannerChanges'>
					<swiper-item v-for="(item,index) in bannerlist" :key="index">
						<view class="i_tCont">
							<image :src="item.img" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="i_tDots">
					<view class="i_tDot" v-for="(item,index) in bannerlist" :key="index" :class="{'active': index == threeIndexs}"><view class="i_tIcon"></view></view>
				</view>
			</view>
		</view> -->
		<!-- <view @click="navTo('/pages_mine/pages/my/creator')">
			<image src="https://cos.ryz1620.com/liankun/static/IMG303.jpeg" mode="widthFix"></image>
		</view> -->
		<view @click="navTo('/pages_mine/pages/my/creator')" style="padding: 0 28rpx;">
			<image src="https://cos.ryz1620.com/liankun/static/xuebanner.png" mode="widthFix"></image>
		</view>
		<view class="bottombanner">
			<view class="i_bOper" @click="navTo('/pages_now/pages/now/creator/list')"><text>更多</text><view class="i_boIcon"><view class="iconfont icon-more"></view></view></view>
			<view class="i_bTitle">分销学堂</view>
			<view class="list" v-for="(item,index) in articles" :key="index" >
				<view class="i_cont" @click="gitdetail(item.id)">
					<view class="i_img"><image :src="item.cover"></image></view>
					<view class="i_bOpers">
						<view class="i_tit">{{item.title}}</view>
						<view class="i_tits">{{item.brief}}</view>
						<view class="i_time">{{item.ctime}} <text>阅读:{{item.pv}}</text></view>
					</view>
				</view>
			</view>
		</view> 
		
		<!-- 内容 -->
		<view class="i_content">
			<view class="i_cLine"></view>
			<view class="i_cContain">
				<view class="i_cTabs">
					<view class="i_cTab" :class="{'active': contentIndex === 0}" @tap="contentBannerToggle(0)"><view class="i_cTab-txt"><text>分销品牌榜</text></view></view>
					<view class="i_cTab" :class="{'active': contentIndex === 1}" @tap="contentBannerToggle(1)"><view class="i_cTab-txt"><text>分销精英榜</text></view></view>
				</view>
				<view class="i_cSwiper" v-if="contentIndex==0">
					<view class="m_list">
						<view class="k1">排名</view>
						<view class="k2">品牌名称</view>
						<view class="k3">业绩</view>
					</view>
					<view class="m_list" v-for="(item,index) in mlist" :key="index">
						<view class="k1"><image v-if="index == 0" src="@/static/demo/k1.png"></image><image v-else-if="index == 1" src="@/static/demo/k2.png"></image><image v-else-if="index == 2" src="@/static/demo/k3.png"></image><text v-else>{{index+1}}</text></view>
						<view class="k2"><image :src="item.back_img.path ||'https://cos.ryz1620.com/liankun/static/IMG280.png'"></image><text>{{item.name||'***'}}</text></view>
						<view class="k3">{{item.all_sellprice}}</view>
					</view>
				</view>
				<view class="i_cSwiper" v-if="contentIndex==1">
					<view class="m_list">
						<view class="k1">排名</view>
						<view class="k2">用户名称</view>
						<view class="k3">业绩</view>
					</view>
					<view class="m_list" v-for="(item,index) in plist" :key="index">
						<view class="k1"><image v-if="index == 0" src="@/static/demo/k1.png"></image><image v-else-if="index == 1" src="@/static/demo/k2.png"></image><image v-else-if="index == 2" src="@/static/demo/k3.png"></image><text v-else>{{index+1}}</text></view>
						<view class="k2"><image :src="item.headimg.path ||'https://cos.ryz1620.com/liankun/static/IMG280.png'"></image><text>{{item.name ||'***'}}</text></view>
						<view class="k3">{{item.commission}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="rightfixed">
			<!-- 分享 -->
			<view class="iconfont icontubiaozhizuomoban_fuzhi" v-if="showright"><button open-type="share" class="sharebtn"></button></view>
			<!-- 电话-->
			<view class="iconfont iconhuaban3" v-if="showright" @click="callPhone('07738282291')"></view>
			<!-- 购物车 -->
			<view class="iconfont icon-shopping" v-if="showright" @click="malldcart"></view>
			<!-- 导航 -->
			<view class="iconfont iconhuaban4" v-if="showright" @click="openLocation"></view>
			<!-- 二维码 -->
			<view class="iconfont icon-erweima" v-if="showright"></view>
			<!-- 显示 -->
			<view class="iconfont icon-arrow-left-copy" v-if="showright" @click="iconshow"></view>
			<!-- 隐藏 -->
			<view class="iconfont icon-arrow-up"v-if="!showright" @click="iconshow"></view>
		</view>
       
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_mall from '@/service/mall.js'
import service_now from '@/service/now'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
			banner:[],
			threeIndex:0,
			threeIndexs:0,
			bannerlist:[],
			userId:"",
			searchVal:'',
			// 是否滑动到底部
			isScrollBtm: false,
			isScrollFlag: false,
			type:0,
			contentIndex:0,
			mlist:[],
			plist:[],
			latitude:"",
			longitude:"",
			showright:false,
			articles:[],
		}
	},
	onLoad(params) {
		this.$utils.getUrl()
		this.banners()
		this.pagelists()
		this.masterList()
		this.promoterList()
		let lng = uni.getStorageSync('location_longitude')
		if(lng){
			this.longitude = uni.getStorageSync('location_longitude')
			this.latitude = uni.getStorageSync('location_latitude')
		}else{
			this.getlng()
		}
		this.userId = uni.getStorageSync('userId')
		let token = uni.getStorageSync('token')
		if(params.share_uid){
			let shareuId= params.share_uid
			this.$store.commit('index/SET_shareuId', shareuId)
			if(token && shareuId){
				service_mall.getPromoter({share_uid:shareuId})
					.then(res => {
				})
			}
		}
	},
	onShareAppMessage(res) {
		let that = this
		if (res.from === 'button') {}
		return {
		  title: '融易装',
		  path: '/pages_now/pages/now/resource/index?share_uid='+ this.userId,
		  success: function (res) {
		  }
		}  
	},
	methods: {
		// 3D-轮播图切换
		threeBannerChange(e) {
			this.threeIndex = e.detail.current
		},
		// 3D-轮播图切换
		threeBannerChanges(e) {
			this.threeIndexs = e.detail.current
		},
		searchData(){
			uni.navigateTo({ url: '/pages_mall/pages/mall/goods/list?keyword=' + this.searchVal })
		},
		toONEshop(url){
			uni.navigateTo({
				url
			});
		},
		iconshow(){
			this.showright = !this.showright
		},
		getlng(){
			let that = this
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
					that.latitude = res.latitude
					that.longitude = res.longitud
					 uni.setStorageSync('location_longitude', res.longitude);
					 uni.setStorageSync('location_latitude', res.latitude);
			    }
			});
		},
		gitdetail(id){
			uni.navigateTo({
				url:'/pages_now/pages/now/creator/detail?id=' + id
			})
		},
		// 电话
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		// 购物车
		malldcart(){
			uni.navigateTo({ url:`/pages_mall/pages/mall/cart/cart` })
		},
		openLocation(){
			let latitude = Number(this.latitude)
			let longitude = Number(this.longitude)
			 uni.openLocation({
				latitude:latitude,
				longitude:longitude,
				name:'联坤家居广场',
				address:'桂林市叠彩区环城北一路39号',
				scale: 20
			});
		},
		contentBannerToggle(index) {
			this.type = index
			if (this.contentIndex != index) this.contentIndex = index
		},
		navTo(url){
			uni.navigateTo({  
				url
			})
		},
		openadmin(){
			uni.navigateToMiniProgram({
			  appId: 'wxe7f34fe6cd1469bf',
			  path: 'pages/mall/newIndex/newIndex',
			  extraData: {},
			  envVersion: 'develop',
			  success(res) {
			    // 打开成功
			  }
			})
		},
		// 内容-轮播图切换
		contentBannerChange(e) {
			this.contentIndex = e.detail.current
		},
		// 客服
		gitchat(){
			let token = uni.getStorageSync('token')
			if(token){
				uni.navigateTo({
					url:"/pages_customer/pages/index?partner_type=root&partner_id=0"
				})
			}else{
				uni.showModal({
				    title: "提示！",
				    content: "请先登录！",
				    success: function(s) {
				        if (s.confirm) {
				           uni.navigateTo({
				           	url: '/pages_login/pages/login/login/index',
				           });
				        }
				    }
				});
			}
		},
		// banner
		banners(){
			service_mall.index_getBanner({
				type:15
			}).then(res => {
				if (res.code == 1) {
					this.banner = res.data
				}
			});
		},
		// 文章
		pagelists(){
			service_now.getpaging({
				page:1,
				pagesize:4
			}).then(res => {
				if (res.code == 1) {
					this.articles = res.data.articles
				}
			});
		},
		// 创业主排行
		masterList(){
			service_mall.masterList({
				num:10
			}).then(res => {
				if (res.code == 1) {
					this.mlist = res.data
				}
			});
		},
		// 创业精英排行
		promoterList(){
			service_mall.promoterList({
				num:10
			}).then(res => {
				if (res.code == 1) {
					this.plist = res.data
				}
			});
		},
		
	}
}
</script>

<style lang="scss" scoped>
.index{
	width: 100vw;min-height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.topcont{
	position: relative;
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.topinput{
	width: 100%;
	z-index: 99;
}
.kficon{
	position: absolute;
	bottom:100rpx;
	width: 220rpx;
	height: 60rpx;
	line-height: 60rpx;
	color: #fff;
	text-align: center;
	border-radius: 50rpx;
	background:#ffbe00 ;
	left: 50%;
	margin-left: -90rpx;
}
.i_top {
		margin-top: 10rpx;
		padding-left: 32rpx;
		padding-right: 120rpx;
		position: relative;
		.i_tCan {width: 100%;}
		.i_tBtn {width: 100rpx;display: flex;flex-flow: column;justify-content: center;align-items: center;position: absolute;right: 10rpx;top:0;}
		.i_tbIcon {width: 60rpx;height: 60rpx;line-height: 60rpx;text-align: center;color: #ccc;font-size: 42rpx;}
		.i_tbTxt {height: 28rpx;line-height: 28rpx;font-size: 20rpx;margin-top: 4rpx;}
		.i_tInput {height: 60rpx;border-radius: 36rpx;background: rgba(240,240,240,0.6);position: relative;overflow: hidden;
			& > input {width: 100%;height: 100%;font-size: 24rpx;padding: 0 24rpx 0 72rpx;}
		}
		.i_tiIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #ccc;font-size: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;left: 28rpx;}
}
.i_tSwiper{position: relative;}
.i_tDots {width: 100%;position: absolute;bottom: 15rpx;left: 0;display: flex;justify-content: center;}
	.i_tDot {width: 50rpx;height: 6rpx;margin:0 5rpx;
		&.active .i_tIcon {background: #ffd425;}
		.i_tIcon {width: 50rpx;height: 6rpx;background: rgba(255, 255, 255, .5);}
	}
// 功能
	.i_fun {display: flex;padding:30rpx;
		.i_fItem {flex: 1;}
		.i_fIcon {width: 60rpx;height: 60rpx;margin: 40rpx auto 0;}
		.i_fTxt {height: 34rpx;line-height: 34rpx;text-align: center;font-size: 24rpx;margin-top: 14rpx;}
	}	
.infodata{
	    background: #fff;
	    padding: 30rpx 60rpx;
		.infoc{
			border:1px #eb1d21  solid;
			height: 70rpx;
			line-height: 70rpx;
			display: flex;
			border-radius: 40rpx;
			.iconfont{
				display: flex;
				color: #eb1d21;
				font-size: 34rpx;
				width: 80rpx;
				justify-content: center;
				image{
					width: 42rpx;
					height: 42rpx;
					margin-top: 12rpx;
				}
			}
			.infocont{
				color: #eb1d21;
			}
		}
}
.btnicon{
	position: absolute;
	bottom:100rpx;
	width: 100%;
	height: 60rpx;
	line-height: 60rpx;
	display: flex;
	justify-content: center;
	view{
		display: inline-block;
		background: rgba(255,255,255,0.5);
		color: #fff;
		border-radius: 50rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		margin: 0 10rpx;
		text-shadow: 1px 1px 2px #333;
	}
}

	.i_bOper {height: 62rpx;line-height: 62rpx;font-size: 24rpx;padding: 0 64rpx;margin-top: 30rpx;position: relative;float: right;
		.i_boIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;text-align: center;color: #6c6c6c;font-size: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;right: 32rpx;}
	}
	.i_bTitle {height: 110rpx;line-height: 122rpx;font-size: 36rpx;font-weight: bold;padding-left: 32rpx;}
// 设计师推荐
	.i_design {margin-top: 24rpx;
		.i_dOper {height: 62rpx;line-height: 62rpx;font-size: 24rpx;padding: 0 72rpx;margin-top: 30rpx;position: relative;float: right;
			.i_doIcon {width: 32rpx;height: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;right: 32rpx;}
		}
		.i_tOper {height: 62rpx;line-height: 62rpx;font-size: 24rpx;padding: 0 64rpx;margin-top: 30rpx;position: relative;float: right;
			.i_toIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;text-align: center;color: #6c6c6c;font-size: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;right: 32rpx;}
		}
		.i_dTitle {height: 86rpx;line-height: 122rpx;font-size: 36rpx;font-weight: bold;padding-left: 32rpx;}
		.i_dList {width: 100%;padding: 28rpx 32rpx;overflow-x: auto;white-space: nowrap;
			&::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}
		}
		.i_dItem {width: 512rpx;height: 446rpx;margin-right: 24rpx;border-radius: 10rpx;background: #fff;box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, .06);display: inline-block;
			&:nth-last-child(1) {margin: 0;}
		}
		.i_dUser {height: 164rpx;padding: 28rpx 28rpx 0;}
		.i_dHead {width: 64rpx;height: 64rpx;margin-right: 20rpx;border-radius: 50%;background: #f6f7fb;overflow: hidden;float: left;}
		.i_dFee {height: 44rpx;line-height: 44rpx;font-size: 20rpx;float: right;}
		.i_dName {height: 34rpx;line-height: 34rpx;font-size: 24rpx;font-weight: bold;margin-top: 2rpx;}
		.i_dRemark {height: 28rpx;line-height: 28rpx;font-size: 20rpx;color: #939393;}
		.i_dTags {margin-top: 8rpx;}
		.i_dTag {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 20rpx;padding: 0 20rpx;margin-right: 8rpx;border-radius: 18rpx;background: #f9f6f3;display: inline-block;}
		.i_dImage {height: 254rpx;margin: 0 28rpx;border-radius: 8rpx;background: #f6f7fb;overflow: hidden;}
	}
	// 推荐案例
	.i_demo {margin-top: 24rpx;
		.i_dOper {height: 62rpx;line-height: 62rpx;font-size: 24rpx;padding: 0 64rpx;margin-top: 30rpx;position: relative;float: right;
			.i_doIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;text-align: center;color: #6c6c6c;font-size: 32rpx;margin-top: -16rpx;position: absolute;top: 50%;right: 32rpx;}
		}
		.i_dTitle {height: 110rpx;line-height: 122rpx;font-size: 36rpx;font-weight: bold;padding-left: 32rpx;}
		.i_dList {padding-left: 32rpx;}
		.i_dItem {width: 332rpx;height: 492rpx;margin-right: 22rpx;border-radius: 10rpx;overflow: hidden;display: inline-block;}
		.i_dImg {width: 100%;height: 300rpx;background: #f6f7fb;overflow: hidden;}
		.i_dTit {line-height: 36rpx;font-size: 24rpx;margin-top: 14rpx;}
		.i_dTags {margin-top: 12rpx;}
		.i_dTag {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 20rpx;padding: 0 16rpx;margin-right: 8rpx;border-radius: 18rpx;background: #f9f6f3;display: inline-block;}
		.i_dUser {color: #939393;margin-top: 16rpx;}
		.i_dRemark {height: 36rpx;line-height: 36rpx;font-size: 20rpx;float: right;}
		.i_dHead {width: 36rpx;height: 36rpx;margin-right: 8rpx;border-radius: 50%;background: #f6f7fb;overflow: hidden;float: left;}
		.i_dName {height: 36rpx;line-height: 36rpx;font-size: 20rpx;overflow: hidden;}
	}
.ceater{
	display: flex;
	padding: 18rpx 0 20rpx 32rpx;
	overflow: hidden;
	view{
		width: 220rpx;
		height: 220rpx;
		margin: 12rpx 14rpx 0 0;
		border-radius: 4rpx;
		background: #f6f7fb;
		position: relative;
		overflow: hidden;
		text{
			line-height: 50rpx;
			text-align: center;
			color: #fff;
			background: rgba(174,6,5,0.6);
			position: absolute;
			bottom:20rpx;
			left: 30rpx;
			right: 30rpx;
			border-radius: 50rpx;
		}
	}
}
	// 内容
		.i_content {
			.i_cLine {height: 16rpx;background: #f6f7fb;}
			.i_cContain {width: 100vw;display: flex;flex-flow: column;position: relative;}
			.i_cTabs {height: 112rpx;background: #fff;position: relative;position: sticky;top: 0;z-index: 10;}
			.i_cAdd {width: 104rpx;height: 104rpx;margin-top: 8rpx;position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;
				& > image {width: 40rpx;height: 40rpx;}
			}
			.i_cTab {height: 112rpx;line-height: 122rpx;color: #6c6c6c;font-size: 36rpx;font-weight: bold;padding: 0 32rpx;position: relative;display: inline-block;
				&.active {color: #333;font-size: 40rpx;}
				&.active .i_cTab-txt::after {content: "";width: 100%;height: 12rpx;background: linear-gradient(90deg, #c9aa79 0%, rgba(255, 255, 255, 0) 100%);position: absolute;bottom: 28rpx;left: 0;	z-index: 1;}
				.i_cTab-txt {height: 100%;position: relative;
					& > text {position: relative;z-index: 2;}
				}
			}
			.i_cSwiper {flex: 1;overflow: hidden;}
			.i_cScroll {height: 100%;}
			.i_cList {padding: 0 32rpx;display: flex;}
			.i_cLeft {flex: 1;}
			.i_cLeft:first-child {padding-right: 12rpx;}
			.i_cLeft:last-child {padding-left: 12rpx;}
			.i_cRight {flex: 1;}
			.i_cItem {width: 100%;padding-bottom: 38rpx;border-radius: 8rpx;overflow: hidden;}
			.i_cImage {width: 100%;background: #f6f7fb;height: 360rpx;overflow: hidden;
				> image {min-height: 360rpx;}
			}
			.i_cTag {height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 20rpx;padding: 0 16rpx 0 48rpx;margin: 16rpx 16rpx 0;border-radius: 22rpx;background: #f9f6f3;position: relative;display: inline-block;overflow: hidden;
				.i_ctIcon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
			}
			.i_cText {line-height: 36rpx;font-size: 24rpx;margin: 16rpx 20rpx 0;}
			.i_cUser {margin: 16rpx 16rpx 0;}
			.i_cHead {width: 36rpx;height: 36rpx;margin-right: 8rpx;border-radius: 50%;background: #f6f7fb;float: left;overflow: hidden;}
			.i_cPraise {height: 36rpx;color: #939393;font-size: 20rpx;float: right;display: flex;align-items: center;}
			.i_cpIcon {width: 32rpx;height: 32rpx;margin: 0 8rpx;}
			.i_cName {height: 36rpx;line-height: 36rpx;color: #939393;font-size: 20rpx;overflow: hidden;}
		}
.m_list{
	display: flex;
	height: 110rpx;
	line-height: 110rpx;
	border-bottom: 1px #f9f9f9 solid;
	.k1{
		width: 140rpx;
		font-size: 30rpx;
		text-align: center;
		image{
			margin: 0 auto;
			margin-top: 20rpx;
			width: 60rpx;
			height: 60rpx;
		}
		text{
			font-size: 40rpx;
		}
	}
	.k2{
		flex: 1;
		overflow: hidden;
		image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			float: left;
			margin-top: 15rpx;
			margin-right: 20rpx;
		}
	}
	.k3{
		width: 180rpx;
	}
}		
.cxshare{
	position: absolute;
	top:5rpx;
	right: 100rpx;
	z-index: 9;
	font-size: 18rpx;
	background: rgba(242,18,29,0.4);
	padding: 4rpx 15rpx;
	border-radius: 20rpx;
	color: #fff;
}
.topcont .i_three{
	margin: 15rpx 32rpx;
	border-radius: 10rpx;
	background: #fff;
	overflow: hidden;
	
}
.topcont .i_three .i_tCont{
  height:250rpx;
  image{
	height:250rpx;  
  }
}
.creator_item{
	display: flex;
	.creator_icon{
		flex: 1;
		padding: 40rpx 0;
		text-align: center;
		image{
			display: block;
			width: 80rpx;
			height: 80rpx;
			margin: auto;
			margin-bottom: 10rpx;
		}
	}
}
.list{
	padding:0 30rpx;
}
.i_cont{
	height: 240rpx;
	padding: 20rpx;
	padding-right:0;
	padding-left: 220rpx;
	position: relative;
	.i_img{
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		top:20rpx;
		left: 0;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.i_tit{
		font-size:30rpx;
		height: 80rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
	}
	.i_tits{
		font-size:26rpx;
		height: 68rpx;
		overflow: hidden;
		 text-overflow: ellipsis;
		 display: -webkit-box;
		 -webkit-line-clamp: 2;
		 -webkit-box-orient: vertical;
		 margin-bottom: 10rpx;
		  color: #999;
	}
	.i_time{
		font-size:26rpx;
		color: #999;
		text{
			float: right;
		}
	}
}
</style>